<template>
	<div class="two_department">
		<div class="tw_de_box">
			<div class="tw_de_list" v-for="(item,index) in tw_de_list" :key='index'>
				<div class="tw_list_title">{{item.name}}</div>
				<div class="tw_de_item" v-for="(ite,ind) in item.tow" :key='ind' :class="ite.type == 'yes'?'tw_de_status_true':''" @click="tw_de_click(ite.party_id,index,ind)">
					<div>
						<div class="tw_de_it_nick">{{ite.nick_name}}</div>
						<div class="tw_de_it_true">{{ite.true_name}}</div>
					</div>
					<div v-if="de_select" class="tw_item_tou">
						<img v-if="ite.type == 'yes'" src="https://o6wndwjxn.qnssl.com/%E9%80%89%E4%B8%AD.svg" alt="">
						<img v-else src="https://o6wndwjxn.qnssl.com/%E6%9C%AA%E9%80%89%E4%B8%AD.svg" alt="">
					</div>
					<div v-else class="tw_item_end">
						{{ite.votes}}票
					</div>
				</div>
			</div>
		</div>
		<div class="tw_de_btn" v-if="de_select">
			<div @click="tw_de_submit">投票</div>
		</div>
		
		<!-- 弹窗组件 -->
		<div class="program_tips" v-show="tw_de_tips" @click="tw_de_tips_click">
			<div>最多可以选择十名员工</div>
		</div>
		
		<div class="program_submit" v-show="tw_de_submit_status">
			<div class="pr_su_box">
				<div class="pr_su_title">重要提示</div>
				<div class="pr_su_tips">您只有一次投票的机会,是否确认投票</div>
				<div class="pr_su_btn">
					<div @click="program_sub_true">投票</div>
					<div @click="program_sub_false">取消</div>
				</div>
			</div>
		</div>
		
		
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				tw_de_list:[],
				de_select:true,
				list_id:[0],
				tw_de_tips:false,
				tw_de_submit_status:false
			};
		},
		created() {
			this.getTw_de()
		},
		methods:{
			program_sub_true(){
				this.tw_de_submit_status = false
				this.de_select = false
				for(var i = 0 ;i < this.tw_de_list.length ; i++ ){
					if(this.tw_de_list[i].tow){
						for(var j = 0; j <this.tw_de_list[i].tow.length ; j ++ ){
							this.tw_de_list[i].tow[j].type = 'no'
						}
					}
				}
				this.list_id.splice(0,1)
				var string = this.list_id.join(',')
				let requery = {
					member_id: this.$store.state.member_id,
					party_ids:string
				}
				axios.post('http://web.zhiyunzaixian.com/Party/v1.party/votes', requery).then(res => {
					let {code , data} = res.data
					if(code == 200){
						this.tw_de_see()
					}
				})
				
			},
			program_sub_false(){
				this.tw_de_submit_status = false
			},
			tw_de_tips_click(){
				this.tw_de_tips = false
			},
			getTw_de(){
				let requery = {
					member_id: this.$store.state.member_id
				}
				axios.post('http://web.zhiyunzaixian.com/Party/v1.party/liststaff', requery).then(res => {
					// console.log('部门投票2',res)
					let {code,data} = res.data
					if(code == 200){
						for(var i = 0 ;i < data.length ; i++ ){
							if(data[i].tow){
								for(var j = 0; j <data[i].tow.length ; j ++ ){
									data[i].tow[j].type = 'no'
								}
							}
						}
						this.tw_de_list = data
					}else{
						this.de_select = false
						this.tw_de_see()
					}
				})
			},
			tw_de_see(){
				let requery = {
					member_id: this.$store.state.member_id
				}
				axios.post('http://web.zhiyunzaixian.com/Party/v1.party/votesres', requery).then(res => {
					let {code,data} = res.data
					if(code == 200){
						this.tw_de_list = data
					}
				})
			},
			tw_de_click(id,index,ind){
				if(this.list_id.length < 11){
					this.tw_de_list[index].tow[ind].type = 'yes'
					for(var i = 0 ; i < this.list_id.length ; i++ ){
						if(this.list_id[i] == id){
							this.tw_de_list[index].tow[ind].type = 'no'
							this.list_id.splice(i,1)
							return
						}
					}
					this.list_id.push(id)
				}else{
					if(this.tw_de_list[index].tow[ind].type == 'yes'){
						this.tw_de_list[index].tow[ind].type = 'no'
						for(var i = 0 ; i < this.list_id.length ; i++ ){
							if(this.list_id[i] == id){
								this.list_id.splice(i,1)
								return
							}
						}
					}else{
						this.tw_de_tips = true
					}
				}
			},
			tw_de_submit(){
				this.tw_de_submit_status = true
			}
		}
	}
</script>

<style>
	.tw_item_end{
		line-height: 50px;
		text-align: right;
	}
	.tw_de_box{
		background: white;
	}
	.tw_list_title{
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 15px;
		font-weight: bold;
		color: #333333;
		border-bottom: 1px solid #CCCCCC;
	}
	.tw_de_item{
		padding: 0 20px;
		display: flex;
		height: 50px;
		font-size: 14px;
		color: #333333;
		border-bottom: 1px solid #CCCCCC;
	}
	.tw_de_item>div{
		flex: 1;
		width: 50%;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.tw_de_it_nick,
	.tw_de_it_true{
		line-height: 25px;
	}
	.tw_item_tou{
		position: relative;
	}
	.tw_item_tou>img{
		position: absolute;
		right: 0;
		top: 15px;
		width: 20px;
		height: 20px;
	}
	.tw_de_btn{
		width: 100%;
		height: 180px;
		background: #F0F0F0;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tw_de_btn>div{
		width: 120px;
		height: 41px;
		background: #DA4131;
		color: white;
		font-size: 15px;
		text-align: center;
		line-height: 41px;
		border-radius: 5px;
	}
	.tw_de_status_true{
		background: #333333;
		color: white;
	}
	.program_tips{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		text-align: center;
		z-index: 100;
	}
	.program_tips>div{
		display: inline-block;
		background: rgba(0,0,0,0.8);
		color: white;
		padding: 15px 8px;
		font-size: 12px;
		border-radius: 4px;
		margin-top: 45vh;
	}
	.program_submit{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		background: rgba(0,0,0,0.8);
		overflow: hidden;
	}
	.pr_su_box{
		width: 70vw;
		height: 180px;
		background: white;
		margin-left: 15vw;
		margin-top: 35vh;
		text-align: center;
		border-radius: 2px;
		position: relative;
	}
	.pr_su_title{
		font-size: 18px;
		font-weight: bold;
		height: 50px;
		line-height: 50px;
		color: #333333;
	}
	.pr_su_tips{
		font-size: 15px;
		color: #999999;
		padding: 5px 30px;
	}
	.pr_su_btn{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		display: flex;
		border-top: 1px solid #CCCCCC;
	}
	.pr_su_btn>div{
		flex: 1;
		font-size: 15px;
	}
	.pr_su_btn>div:first-child{
		color: #3CC51F;
		border-right:1px solid #CCCCCC ;
	}
</style>

